// pages/home/home-nav/personal-overview/anormaly-statistics/anormaly-statistics.ts
// @ts-ignore
import * as echarts from '../../../../../components/ec-canvas/echarts';
import { initEcharts } from '../../../../../utils/util'

var option = {
  title: {
    text: '异常血压统计',
    left: 'center',
    top: 'center',
    textStyle: {
      fontSize:'12px'
    }
  },
  series: [
    {
      type: 'pie',
      data: [],
      radius: ['65%', '80%'],
    },
  ],
};


Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true, // 延迟加载
    },
    realData: <RiskLevelEntity>{ normal: 1, low: 1, light: 2, middle: 1, high: 2 },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeChart() {
      // 更新数据重新数据初始化
      const canvasComponent = this.selectComponent("#anormal-statistics-bar");
      // note: 动态获取数据后更新this.data.realData，即可。
      const riskLevel = [
        {
          value: this.data.realData.normal,
          name: '正常高值',
          itemStyle: {
            color: '#F1C226',
          },
        },
        {
          value: this.data.realData.low,
          name: '偏低',
          itemStyle: {
            color: '#76A0D4',
          },
        },
        {
          value: this.data.realData.light,
          name: '轻度',
          itemStyle: {
            color: '#E7A029',
          },
        },
        {
          value: this.data.realData.middle,
          name: '中度',
          itemStyle: {
            color: '#F27E10',
          },
        },
        {
          value: this.data.realData.high,
          name: '重度',
          itemStyle: {
            color: '#CC5557',
          },
        },
      ];
      const options = this.changeOptionsData(riskLevel)
      initEcharts(options, canvasComponent);
    },
    // 传入动态数据
    changeOptionsData(initData: any) {
      option.series[0].data = initData
      return option;
    },
    updateRealData(data: RiskLevelEntity) {
      this.setData({
        realData: data
      })
      this.changeChart();
    }
  },
  /*
  * 组件所在页面的生命周期
  */
  pageLifetimes: {
    show: function () {
      this.changeChart();
    },
  },
  /*
  * 组件自己的生命周期
  */
  lifetimes: {
    attached: function () {
      this.changeChart();
    }
  }
})